使用 JavaScript 框架的元件基礎

在第 12 天，我開始觀看 Vue School 的 Vue Component Fundamentals with the Composition API Course 的教學，完成所有課程並將示範程式碼重寫成 Svelte 5 與 Angular 19。
課程由一個 Coffee Plan 選擇器開始，最後完成兩個獨立的小專案。

這兩個小專案為：

1. 建置一個 GitHub 使用者個人資料的 Vue 元件
2. 建置一個警示 (Alert) Vue 元件

在這篇文章中，我將描述如何建立新專案、刪除樣板程式碼，並複製全域樣式表。

為各框架建立新專案

Vue 3 應用程式

npm create vue@latest
Entered the application name to fundamental-vue
Checked TypeScript, Prettier, Eslint in the menu
Chose no to 0xlint 

cd fundamental-vue3
npm i
npm run dev
應用程式執行於 http://localhost:5173。

SvelteKit 應用程式

npx sv create fundamental-svelte
Which template would you like?  Choose SvelteKit minimal
Add type checking with TypeScript? Yes, using Typescript syntax
What would you like to add to your project? Choose prettier, eslint, sveltekit-adapter
sveltekit-adapter: Which SvelteKit adapter would you like to use? Auto
Which package manager do you want to install dependencies with? npm

cd fundamental-svelte
npm i
npm run dev
應用程式執行於 http://localhost:5173。

Angular 19 應用程式

ng new fundamental-angular
Select any stylesheet format, and I chose CSS.
Type no to SSR and SSG.

cd fundamental-angular
npm i
ng serve
應用程式執行於 http://localhost:4200。

複製起始樣式表與 HTML

Vue 3 應用程式

1. 更新 global CSS 樣式於 main.css

2. 刪除樣板程式碼

• base.css
• 刪除 components 資料夾內所有元件

3. 將 html 複製到 App.vue 中 <template> 標籤內。

SvelteKit 應用程式

針對 SvelteKit，我採用以下方法將 global CSS 樣式套用至所有頁面：

1. 新增 routes/+layout.svelte

{@render children()}

2. 建立 routes/global.css

• 複製全域樣式至 global.css。

3. 複製起始 HTML 到專案

• 刪除 app.component.css 和 app.component.spec.ts
• 將 html 複製到 +page.svelte。

Angular 19 應用程式

1. 更新 global CSS 樣式於 styles.scss。

2. 複製起始 HTML 到專案

• 刪除 app.component.css 和 app.component.spec.ts
• 將 html 複製到 app.component.html。

3. 更新 app.component.ts

• 在 @Component 裝飾器內，將 imports 陣列設定為 []，因為不需要 RouterOutlet。

我們已成功建立專案、安裝依賴，並替換了全域樣式。

Github 倉庫

• Vue 3: https://github.com/railsstudent/intro-vue3-components
• Svelte 5: https://github.com/railsstudent/intro-svelte-components
• Angular 19: https://github.com/railsstudent/intro-angular-components